<!DOCTYPE HTML>

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>VVG Demonstrator</title>
      <link rel="icon" href="http://versi.edu.au/sites/default/files/acquia_marina_favicon.ico" type="image/x-icon">
      
      <!-- ExtJS dependencies -->
      <link rel="stylesheet" type="text/css" href="js/extjs-4.1.0-rc3/resources/css/ext-all-access.css" />
<!--      <link rel="stylesheet" type="text/css" href="js/extjs-4.1.0-rc3/resources/css/ext-all.css" />-->
      <script type="text/javascript" src="js/extjs-4.1.0-rc3/ext-all-dev.js"></script>
<!--      <link rel="stylesheet" type="text/css" href="js/extjs-4.1.0-rc1/resources/css/ext-all.css" />-->
<!--      <script type="text/javascript" src="js/extjs-4.1.0-rc1/ext-all-dev.js"></script>-->
<!--      <script type="text/javascript" src="js/extjs-4.1.0-rc1/ext-all-debug-w-comments.js"></script>-->
<!--      <link rel="stylesheet" type="text/css" href="js/ext-4.0.7-gpl/resources/css/ext-all.css" />-->
<!--      <script type="text/javascript" src="js/ext-4.0.7-gpl/ext-all-dev.js"></script>-->
<!--      <script type="text/javascript" src="js/ext-4.0.7-gpl/ext-dev.js"></script>-->
      
      <!-- OpenLayers dependencies -->
      <link rel="stylesheet" href="js/OpenLayers-2.11/theme/default/style.css" type="text/css">
      <link rel="stylesheet" href="js/OpenLayers-2.11/theme/default/google.css" type="text/css">
<!--      <link rel="stylesheet" href="js/OpenLayers-2.11/examples/style.css" type="text/css">-->
      <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.7&amp;sensor=false"></script>
      <script type="text/javascript" src="js/OpenLayers-2.11/lib/OpenLayers.js"></script>
<!--      <script type="text/javascript" src="js/OpenLayers-2.11/OpenLayers.js"></script>-->
      <!--
         OpenLayers 2.11 and Google Maps v3.7 Hot Patch
         - prevents Google Maps license popup without violating its EULA
         - needed because OpenLayers 2.11 is designed to work only with
           Google Maps v3.6, but v3.6 is no longer provided (minimum version
           returned is v3.7, even if v3.6 is requested, 2012-06-01)
         - patch from:
           http://trac.osgeo.org/openlayers/wiki/Release/2.11/GoogleMaps37
      -->
      <script type="text/javascript">
         OpenLayers.Layer.Google.v3.repositionMapElements = function() {
            // This is the first time any Google layer in this mapObject has been
            // made visible.  The mapObject needs to know the container size.
            google.maps.event.trigger(this.mapObject, "resize");

            var div = this.mapObject.getDiv().firstChild;
            if (!div || div.childNodes.length < 3) {
               this.repositionTimer = window.setTimeout(
                     OpenLayers.Function.bind(this.repositionMapElements, this),
                     250
               );
               return false;
            }

            var cache = OpenLayers.Layer.Google.cache[this.map.id];
            var container = this.map.viewPortDiv;

            // move the ToS and branding stuff up to the container div
            // depends on value of zIndex, which is not robust
            for (var i=div.children.length-1; i>=0; --i) {
               if (div.children[i].style.zIndex == 1000001) {
                     var termsOfUse = div.children[i];
                     container.appendChild(termsOfUse);
                     termsOfUse.style.zIndex = "1100";
                     termsOfUse.style.bottom = "";
                     termsOfUse.className = "olLayerGoogleCopyright olLayerGoogleV3";
                     termsOfUse.style.display = "";
                     cache.termsOfUse = termsOfUse;
               }
               if (div.children[i].style.zIndex == 1000000) {
                     var poweredBy = div.children[i];
                     container.appendChild(poweredBy);
                     poweredBy.style.zIndex = "1100";
                     poweredBy.style.bottom = "";
                     poweredBy.className = "olLayerGooglePoweredBy olLayerGoogleV3 gmnoprint";
                     poweredBy.style.display = "";
                     cache.poweredBy = poweredBy;
               }
               if (div.children[i].style.zIndex == 10000002) {
                     container.appendChild(div.children[i]);
               }
            }

            this.setGMapVisibility(this.visibility);
         };
      </script>

      <!-- HighCharts dependencies -->
  		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      <script type="text/javascript" src="js/Highcharts-2.2.1/highcharts.js"></script>


      <!-- UB VVG App dependencies -->
      <script type="text/javascript" src="js/date.js"></script>
      <script type="text/javascript" src="js/seedrandom.js"></script>
      
      <!-- UB VVG App -->
      <script type="text/javascript" src="app/lib.js"></script>
      <script type="text/javascript" src="app/lib_bore.js"></script>
      <script type="text/javascript" src="app/lib_data.js"></script>
      <script type="text/javascript" src="app/lib_ol.js"></script>
      <script type="text/javascript" src="app/lib_hc.js"></script>
<!--      <script type="text/javascript" src="app/dbg.js"></script>-->
      <script type="text/javascript" src="app/app.js"></script>
<!--      <script type="text/javascript" src="app/vvg_waterlevels_viz.js"></script>
      <script type="text/javascript" src="vvg.js"></script>-->

      <!--
         Custom Styles
      -->
      <style>
         /* Only required when using ExtJS' Accessibility Theme
            - adds the missing 'Loading ...' spinner gif
            - widens the 'Loading ...' message dialog and adds extra left padding
              to the text for the spinner gif
         */
         .x-mask-msg.x-layer.x-mask-msg-default {
            width: 102px;
         }
         .x-mask-loading{
            background-image: url('js/extjs-4.1.0-rc3/resources/themes/images/default/grid/loading.gif');
            background-position: 5px center;
            background-repeat: no-repeat;
         }
         .x-mask-msg div {
            padding-left: 25px;
         }
         /* Icons for various toolbar controls */
         .x-btn-icon.vvgMapControlHome{
/*            background-image: url(app/icons/GlyphUIIconSetPNGFiles/Home_White.png);*/
            background-image: url(app/icons/GlyphUIIconSetPNGFiles/Home.png);
/*            background-image: url(app/icons/mimiGlyphs/mimiGlyphs/png/6.png);*/
         }
         .x-btn-icon.vvgMapControlPan{
/*            background-image: url(app/icons/GlyphUIIconSetPNGFiles/PaperPlane.png);*/
/*            background-image: url(app/icons/mimiGlyphs/mimiGlyphs/png/41.png);    Cross Arrow */
/*            background-image: url(app/icons/mimiGlyphs/mimiGlyphs/png/73.png);    Chart */
/*            background-image: url(app/icons/mimiGlyphs/mimiGlyphs/png/41.png);    Expand Square Arrow */
            background-image: url(app/icons/mimiGlyphs/mimiGlyphs/png/19.png);    /*Navigation Wheel */
/*            background-image: url(js/OpenLayers-2.11/theme/default/img/editing_tool_bar.png);
            background-position: -103px -24px;*/
            
         }
         .x-btn-icon.vvgMapControlSketch{
            background-image: url(app/icons/PixelUIIconSetPNG/PenTool.png);
/*            background-image: url(app/icons/GlyphUIIconSetPNGFiles/StatsUp.png);*/
/*            background-image: url(app/icons/GlyphUIIconSetPNGFiles/StatsDown.png);*/
/*            background-image: url(app/icons/mimiGlyphs/mimiGlyphs/png/39.png);*/
/*            background-image: url(js/OpenLayers-2.11/theme/default/img/editing_tool_bar.png);
            background-position: -51px -24px;*/
         }
         .x-form-item-label.vvg-MapControl-SliderLabel{
/*         .vvg-MapControl-SliderLabel{*/
            padding-top: 0px;
         }
         
         /* Centers title text of About dialog */
         .x-box-inner div .x-component.x-window-header-text-container.x-box-item.x-component-default{
            text-align: center!important;
         }
         
         .olControlScaleLine{
            bottom: 3px;
            margin-left: 58px;
         }
      </style>
      
   </head>
   <body></body>      
</html>